import { useIntl } from '@umijs/max';
import React from 'react';
import { formatPower } from '../utils/tools';
import Styles from './StationPowerOverview.less';

// 定义组件数据类型
export interface StationOverviewData {
  stationAmount: number | string | undefined;
  stationInstallation: number | string | undefined;
  stationPower: number | string | undefined;
  stationCharge: number | string | undefined;
  stationDisCharge: number | string | undefined;
}

// 定义组件属性类型
interface StationDataOverviewProps {
  data: StationOverviewData;
}

// 创建组件
const StationPowerOverview: React.FC<StationDataOverviewProps> = ({ data }) => {
  // 使用默认值
  const stationAmount = data?.stationAmount ?? 0;
  // const stationInstallation = data?.stationInstallation ?? 0;
  // const stationPower = data?.stationPower ?? 0;
  // const stationCharge = data?.stationCharge ?? 0;
  // const stationDisCharge = data?.stationDisCharge ?? 0;

  const stationInstallationFormat = formatPower(data?.stationInstallation);
  const stationChargeFormat = formatPower(data?.stationCharge);
  const stationDisChargeFormat = formatPower(data?.stationDisCharge);
  const stationPowerFormat = formatPower(data?.stationPower, true);
  const intl = useIntl();
  return (
    <ul className={Styles.stationOverview}>
      <li className={Styles.stationItem}>
        <p className={Styles.stationLabel}>{intl.formatMessage({ id: 'bigdata.totalPlant' })}</p>
        <span className={Styles.stationValue}>{stationAmount}</span>
      </li>
      <li className={Styles.stationItem}>
        <p className={Styles.stationLabel}>
          {intl.formatMessage({ id: 'bigdata.totalInstalled' })}
        </p>
        <span className={Styles.stationValue}>{stationInstallationFormat.value}</span>
        <span className={Styles.stationValue}>{stationInstallationFormat.unit}</span>
      </li>
      <li className={Styles.stationItem}>
        <p className={Styles.stationLabel}>{intl.formatMessage({ id: 'bigdata.totalPower' })}</p>
        <span className={Styles.stationValue}>{stationPowerFormat.value}</span>
        <span className={Styles.stationValue}>{stationPowerFormat.unit}</span>
      </li>
      <li className={Styles.stationItem}>
        <p className={Styles.stationLabel}>{intl.formatMessage({ id: 'bigdata.totalCharge' })}</p>
        <span className={Styles.stationValue}>{stationChargeFormat.value}</span>
        <span className={Styles.stationValue}>{stationChargeFormat.unit}</span>
      </li>
      <li className={Styles.stationItem}>
        <p className={Styles.stationLabel}>{intl.formatMessage({ id: 'bigdata.totalDisharge' })}</p>
        <span className={Styles.stationValue}>{stationDisChargeFormat.value}</span>
        <span className={Styles.stationValue}>{stationDisChargeFormat.unit}</span>
      </li>
    </ul>
  );
};

export default StationPowerOverview;
